<!DOCTYPE html>
<html lang="en">
    
    <head>
        <META charset="utf-8">

        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->

        <!-- jQuery -->
        <script type="text/javascript"  src="jquery/js/jquery-1.6.2.min.js"></script>

        <!-- jQuery UI -->
        <link   type="text/css"         href="jquery/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <script type="text/javascript"  src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
        
        <!-- XMPP library -->
        <script type="text/javascript"  src="xmpp_components/strophe/strophe.js"></script>
        <script type="text/javascript"  src="xmpp_components/strophe/flXHR.js"></script>
        <script type="text/javascript"  src="xmpp_components/strophe/strophe.flxhr.js"></script>

        
        <!-- Wait cursor -->
        <link   type="text/css"         href="ui_components/waitcursor/css/showLoading.css" rel="stylesheet" />
        <script type="text/javascript"  src="ui_components/waitcursor/js/jquery.showLoading.js"></script>
         
        <!-- Menu bar -->
        <link   type="text/css" href="ui_components/menubar/menubar.css" rel="stylesheet" />
        <script type="text/javascript"  src="ui_components/menubar/menubar.js"></script>
        
        <!-- Tic Tac Toe implementation -->
        <script src="js/tictactoe/ttt_board.js"         type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_location.js"      type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_move.js"          type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_piece.js"         type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_playerType.js"    type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_player.js"        type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_rules.js"         type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_game.js"          type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_canvas.js"        type="text/javascript" ></script>
        <script src="js/tictactoe/ttt_controller.js"    type="text/javascript" ></script>
        
        <!-- Gamers web main -->
        <link   href="version_2/gamersweb.css"          type="text/css" rel="stylesheet" />   
        <script src="version_2/gamersweb_xmpp.js"       type="text/javascript"  ></script>
        <script src="version_2/gamersweb_ui.js"         type="text/javascript"  ></script>
        <script src="version_2/gamersweb_main.js"            type="text/javascript"></script>

        <title>Gamers' Web</title>
    </head>

    <body>
        <header>
            <div id="menubar" class="menubar">
                <ul>
                    <li><a href="#" menu="popupmenu_application">Application</a></li>
                    <li><a href="#" menu="popupmenu_accounts">Accounts</a></li>
                    <li><a href="#" menu="popupmenu_about">About</a></li>
                </ul>
            </div>
        </header>
        
        <section id="main">
            <!-- Menu accordion -->
            <div id="left_pane">
                <h2 class="widgetHeaders"></h2>
                <div id="main_accordion">
                    <div>
                        <h3 id="account"><a href="#">Account Connection:</a></h3>
                        <div>
                            <div id="connection_create">
                                <span id="login_title">Enter to login:</span><br/>
                                <input id="username" type="text" placeholder="Your Jabber user name here" autofocus/><br/>
                                <input id="password" type="password" placeholder="Your Jabber passowrd here"/><br/>
                                <button id="xmpp_connect">Connect</button>
                            </div>
                            <div id="connection_destroy">
                                <span id="logout_title">You are logged in:</span><br/>
                                <button id="xmpp_disconnect">Disconnect</button>
                            </div>  
                        </div>
                    </div>
                    <div>
                        <h3 id="personal"><a href="#">Personal status:</a></h3>
                        <div>Personal status form here</div>
                    </div>
                    <div>
                        <h3 id="buddies"><a href="#">Buddies:</a></h3>
                        <div id='roster-area'>
                            <button id="addContact">Add a contact</button>
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main section tabs -->
            <div id="right_pane">
                <h2 class="widgetHeaders"></h2>
                
                <div id="main_tabs">
                    <ul>
                        <li><a href="#tabWelcome">Welcome</a></li>
                        <li><a href="#tabTicTacToe">Tic Tac Toe</a></li>                        
                    </ul>
                    
                    <div id="tabWelcome">
                        <div id="help">
                            <p>Welcome to Gamers' Web.</p>
                            <p>Use a pre-existing Jabber account to log in. To create a Jabber account, use <a href="https://register.jabber.org/">Jabber's web page</a></p>
                            <p>Click on a name in gamer's name in the roster to chat with him</p>
                            <p>Enter your message to the input box at the bottom of the tab, and hit Enter to send</p>
                            <p>Currently, it is only possible to play Tic Tac Toe against yourself.</p>
                            <p>Developed, tested, with Firefox version 6.0.2. May or may not work with other browsers .... </p>
                        </div>
                    </div>
                    
                    <div id="tabTicTacToe">
                        <div id="gameTitles">
                            <div id="gameTitle1">
                                <span id="humanGamer">Guest</span><span class="textRed"> X </span> Vs. Machine <span class="textBlue"> O </span>
                            </div>
                            <div id="gameTitle2">
                            </div>   
                            <div id="gameTitle3">
                                <meta id="playerXsymbol" src="resources/x.png" alt="X"></meta>
                                <meta id="playerYsymbol" src="resources/o.png" alt="O"></meta>                                
                                <img id="currentPlayerSymbol" src="resources/x.png" alt="X" draggable ></img>
                            </div>   
                        </div>
                        <div>
                            <canvas id="gameboard" width="300" height="300"> </canvas>
                        </div>
                        <button id="restart">Restart</button>
                        <div class="debugInfo">
                            <div>Mouse location on canvas: xPos = <span id="xPos">n/a</span> , yPos = <span id="yPos">n/a</span></div>
                            <div>Last drop location = <span id="location">n/a</span></div>
                        </div>
                    </div>
                </div>
                
            </div>
        </section>

        <section id="popupmenus">
            <div  id="popupmenu_application" class="popupmenu">
                <ul>
                    <li><a href="#">Exit</a></li>
                </ul>
            </div>

            <div id="popupmenu_accounts" class="popupmenu" >
                <ul>
                    <li><a href="#">Create</a></li>
                    <li><a href="#">Delete</a></li>
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Log out</a></li>
                </ul>
            </div>

            <div id="popupmenu_about" class="popupmenu" >
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </div>
        </section>

    <div id="contactDialog" class="hidden">
        <div><label>Email:</label><input type="email" id="contactId"/></div>
        <div><label>Name:</label><input type="text" id="contactName"/></div>
    </div>
    
    <div id="approveDialog" class="hidden">
        <p><span id="approveJid"></span> has requested a subscription to your presence.</p>
        <p>Please approve or deny.</p>
    </div>
        
    </body>
</html>